<template>
  <div class="home">
    <div>
      <el-form label-width="80px">
        <br>
        <el-form-item label="采购单号">
          <el-input v-model="form.inbound_no" style="width: 30%" autoComplete="off"></el-input>
<!--          <el-button type="info" round size="small" style="margin-left: 1%"> 自动生成</el-button>-->
        </el-form-item>
        <el-form-item label="批次号">
          <el-input  v-model="form.patch_no" style="width: 30%" autoComplete="off"></el-input>
        </el-form-item>
        <el-form-item label="库位">
          <el-select v-model="form.warehouse" placeholder="请选择库位">
            <el-option
              v-for="item in warehouse_option"
              onselect="warehouse_select"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          v-for="(products, index) in form.products"
          :label="'产品' + index"
          :key="products.key"
          :prop="'products.' + index + '.value'"
        >
          <el-select v-model="products.value" placeholder="请选择产品">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label">
            </el-option>
          </el-select>
          <span style="margin-left: 1%;margin-right: 1%">单价</span><el-input v-model="products.price" style="width: 10%"></el-input >
          <span style="margin-left: 1%;margin-right: 1%">数量</span><el-input v-model.number="products.amount" style="width: 10%"></el-input ><span style="margin-left: 1%">罐</span>
          <el-button @click.prevent="removeproducts(products)" style="margin-left: 2%">删除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button @click="addproducts">新增产品</el-button>
        </el-form-item>
        <el-button type="success"  round  style="margin-left: 16px;"  @click="onSubmit">提交</el-button>
      </el-form>
    </div>

  </div>

</template>

<script>
  import { product_list } from '../../api/inbound'
  import { warehouse_list } from '../../api/inbound'
  import { subinbound } from '../../api/inbound'
  export default {
    name: 'inbound',
    data() {
      return {
        options: [
        //   {
        //   value: 'A1',
        //   label: 'A1',
        // },
        //   {
        //     value: 'A2',
        //     label: 'A2',
        //   }
        ],
        warehouse_option:[],
        form: {
          inbound_no:'',
          patch_no:'',
          warehouse:'',
          products:[
          ],}
      }
  },
    mounted() {
      this.product()
      this.warehouse()
    },
    methods: {
      addproducts() {
        this.form.products.push({
          key: Date.now(),
          value: '',
          price:'',
          amount:0,
        });
      },
      removeproducts(item) {
        var index = this.form.products.indexOf(item)
        if (index !== -1) {
          this.form.products.splice(index, 1)
        }
      },
      product() {
        product_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            console.log(this.options)
            this.options = []

            for (let index = 0; index < res.options.length; index++) {
              this.options.push({ value : "" ,label : ""});
              this.options[index].value= res.options[index][0];
              this.options[index].label= res.options[index][1];
            }
            console.log(this.options)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      warehouse() {
        warehouse_list().then(res => { // 调用导入的方法进行查询
          if (res.code === 20000) {
            this.warehouse_option = []
            for (let index = 0; index < res.options.length; index++) {
              this.warehouse_option.push({ value : "" ,label : ""});
              this.warehouse_option[index].value= res.options[index][0];
              this.warehouse_option[index].label= res.options[index][1];
            }
            console.log(this.warehouse_option)
          }
        }).catch(err => {
          console.log(err)
        })
      },
      onSubmit() {
        // console.log(this.form)
        subinbound(this.form)
          .then(this.$router.push('/inbound/inbound_record'))
      },
      warehouse_select(value){
        this.data.form.warehouse = value
      },
    }
  }
</script>

<style scoped>

</style>
